<template>
    <el-container class="min-h-screen bg-cover" :style="{ backgroundImage: `url('${background}')` }">
        <div class="order">
        <div class="group_btn">
           当前订单
        </div>
        <div id="aaa">订单编号: {{orderitems[0].oiOrderid}}</div>
        <el-table
                :data="orderitems"
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >
            <el-table-column prop="oiSpotname" label="景点名称" width="300" align="center"></el-table-column>
            <el-table-column prop="oiImg" label="景点图片" width="200" align="center">
                <template slot-scope="scope">
                    <el-image :src="scope.row.oiImg" width="40" height="40" class="head_pic"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="oiSpottype" label="购票类型" width="220" align="center"></el-table-column>
            <el-table-column prop="oiSpotprice" label="景点单价" width="180" align="center"></el-table-column>
            <el-table-column prop="oiNum" label="购票数量" width="180" align="center">
            </el-table-column>
            <el-table-column prop="oiTotal" label="小计" width="180" align="center">
            </el-table-column>
            </el-table>
        <div id="bbb">共计：{{sumPrice}} 元</div>
        <el-button id="button1" type="danger" size="mini"  @click="cancel()">取消订单</el-button>
        <el-button type="primary"  size="mini" @click="pay">确认付款</el-button>
    </div>
    </el-container>
</template>



<script>
    import order from '@/api/order'
    import cart from '@/api/cart'
    import bigorder from '@/api/bigorder'

    export default {
        beforeRouteEnter(to, from, next) {
            console.log(this, 'beforeRouteEnter'); // undefined
            console.log("mmmmmmmmmmmmmmmmm")
            console.log(to, '组件独享守卫beforeRouteEnter第一个参数');
            console.log(from, '组件独享守卫beforeRouteEnter第二个参数');

            console.log(from.name)
            console.log(next, '组件独享守卫beforeRouteEnter第三个参数');
            next(vm => {
                //因为当钩子执行前，组件实例还没被创建
                // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
                console.log(vm);//当前组件的实例
                console.log(vm.name)
                console.log(11111111111)
                vm.name=from.name
                console.log(vm.name)

            });
        },






        data() {
            return {
                name:"",
                orderitems: null,
                out_trade_no: '',
                subject: '迪士尼VIP票',
                total_amount: '',
                body: '非常之好',
                background: require('@/assets/backgroud/bk3.jpg'),

            }
        },
        created() {
            //-- 生命周期方法，页面渲染之前执行。
            this.getOrderList()
        },
        methods: {
            getOrderList() {
                console.log(222222222222222222222222)
                console.log(this.$route.params.orderId)
                order.list(this.$route.params.orderId).then(response => {
                    console.log(1111111111111111111)
                    console.log(response);
                    this.orderitems = response.data.data.orderitems
                })
            }
            ,
            handleSelectionChange(val) {
                this.multipleSelection = val; //给定义的数组赋值
            },

            cancel() {
                order.cancel(this.orderitems[0].oiOrderid,this.name).then(response => {

                    console.log(response)
                    if (response.data.success) {
                        this.$router.go(-1)

                    }
                })
            },
            pay() {
                /*
                                let postData = `out_trade_no = ${this.out_trade_no}&subject=${this.subject}&total_amount=${this.total_amount}&body=${this.body}`
                */
/*                out_trade_no=this.orderitems[0].oiOrderid
                    subject:'',
                    total_amount=this.sumPrice(),
                    body:''*/

                bigorder.updateS(this.orderitems[0].oiOrderid).then(response => {
                    this.getOrderList()
                })
                this.out_trade_no = this.orderitems[0].oiOrderid
                this.total_amount = this.sumPrice



                let param = new URLSearchParams()
                param.append('out_trade_no', this.out_trade_no)
                param.append('subject', this.subject)
                param.append('total_amount', this.total_amount)
                param.append('body', this.body)


                cart.pay(param)
                    .then(response => {
                        document.querySelector('body').innerHTML = response.data;//查找到当前页面的body，将后台返回的form替换掉他的内容
                        document.forms[0].submit();  //执行submit表单提交，让页面重定向，跳转到支付宝页面
                    })
            }
            ,
        },
        computed: {
            sumPrice() {
                //用一个变量准备接住计算后的值
                let sumPrice = 0.0
                //遍历productList,拿到单价和数量
                for (let i in this.orderitems) {
                    //总价为每个商品的价格(price)*数量(num)   我这里*100是因为组件的单位
                    sumPrice += this.orderitems[i].oiTotal;
                }
                //最后return出去计算好的值,直接用就好了,不用在data中起总价的变量,不然会报错
                return sumPrice
            }
        }
        ,
        components: {}
        ,
    }
</script>

<style scoped>
    el-button{
       margin-left: 1000px;
    }
    /*最外层透明*/
    /deep/ .el-table, /deep/ .el-table__expanded-cell{
        background-color: transparent;
    }
    /* 表格内背景颜色 */
    /deep/ .el-table th,
    /deep/ .el-table tr,
    /deep/ .el-table td {
        background-color: rgba(145, 192, 252, 0.15);
        color: white;
    }
    .order {
        margin: 50px auto;
        width: 1300px;
    }
    #button1{
        margin-left: 1050px;
    }
    #button{
        margin-top: 10px;
    }
    .group_btn {
       text-align: center;
        color: white;
        font-size: 40px;
        margin-bottom: 20px;
    }
    .total_warpper {
        text-align: right;
        margin-top: 30px;
    }

    h3 {
        margin-top: 10px;
    }
    #aaa,#bbb{
        margin-top: 10px;
        color: white;
    }

</style>